<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加数据</title>
</head>
<body>
    <form action="${pageContext.request.contextPath}/item/save" method="get">
        <%--表明是第一个User对象的username age--%>
        姓名<input type="text" name="rolename"><br/>
        <label for="gander">男性</label><input type="radio" name="gender" id="gander" value="男"><br>
        <label for="gander">女性</label><input type="radio" name="gender" id="gander2" value="女"><br>
        所在部门<input type="text" name="department"><br/>
        电话号码<input type="text" name="telephone"><br/>
        <input type="submit" value="提交">
    </form>

    <form>
        通过Excel方式上传<input type="file" name="multipartFile" id="excel">
        <input type="button" onclick="AddExcel()" value="上传">
    </form>

    <div class="timeOut">
        <span>
            上传后，本窗口将在<span id="timeOutClose"></span>秒后自动关闭!
        </span>
    </div>

    <a class="download" href="/excel/test.xlsx">Excel示例样本下载</a>

</body>

<style>
    .download{
        margin-top: 10vh;
        display:inline-block;
    }
</style>

<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script>
    function AddExcel(){
        let formData = new FormData();
        let file = $("#excel")[0].files[0];
        console.log(file)
        formData.append('multipartFile',file);
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/item/saveByExcel",
            cache:false,
            dataType: "json",
            data : formData,
            contentType: false,
            processData: false,
            success:function(result){
                if (result.code = 200)
                alert("请求发送成功")
            }
        })
        timeout();
    }
    let timeOut = document.getElementById("timeOutClose");
    let i = 5;
    let timeout = function () {
        timeOut.innerText = i;
        //innerHtml和innerText的区别也可以了解一下
        if (i >= 0){
            setTimeout("timeout();", 1000);//设置定时器
            //好奇为什么不用setIterval()的可以搜一下他们俩的区别
        }
        else {
            window.close();//关闭页面方法
        }
        i--;
    }
</script>
</html>
